<template>
  <div
    class="h-[50px] flex items-center px-2 hover:bg-sky-50 cursor-pointer"
    :class="{ 'bg-sky-50': active }"
  >
    <span class="text-xs text-current tracking-wider"> <slot></slot></span>

    <div class="ml-auto">
      <el-button text type="primary" size="small" class="px-1" @click.stop="emit('editImg')">
        <el-icon :size="14"><Edit /></el-icon>
      </el-button>
       <span @click.stop="()=>{}">
            <el-popconfirm title="是否要删除该分类？" confirmButtonText="确认" cancelButtonText="取消" @confirm="$emit('delImg')">
                <template #reference>
                    <el-button text class="px-1" type="primary" size="small">
                        <el-icon :size="12"><Close /></el-icon>
                    </el-button>
                </template>
            </el-popconfirm>
        </span>
    </div>
  </div>
</template>

<script setup>

const emit = defineEmits(['editImg','delImg'])
defineProps({
  active: Boolean,
})
</script>
